<template>
  <div class="s-box">
    <!-- 导航 -->
    <van-nav-bar title="专题" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 正文 -->
    <div class="nav-top">
      <div class="s-box-start__nav">
        <!-- 选项卡 -->
        <div class="d-flex px-2">
          <div class="topic-nav" :class="ntype == 1 ? 'topic-active' : ''" @click="nftType(1)">
            NFT专题
          </div>
          <div class="topic-nav" :class="ntype == 2 ? 'topic-active' : ''" @click="nftType(2)">
            NFT盲盒
          </div>
        </div>

        <div class="container">
          <!-- NFT专题 -->
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-config-provider :theme-vars="themeVars">
              <van-list :loading="loading" :finished="finished" finished-text="" @load="onLoad" @offset="10">
                <van-cell v-for="(item, index) in listItems" :key="index" :border="false">
                  <div class="bgimg-1 topic-item">
                    <div class="topic-item__img" @click="toDetail(item.id)">
                      <img :src="item.path" class="img-fluid rounded w-100" alt="" />
                      <div class="topic-item__img__status" :class="$statusFilters.cls(item.status)">
                        {{$statusFilters.name(item.status)}}
                      </div>
                    </div>
                    <div class="topic-item__title d-flex justify-content-between">
                      <div class="m-3 w-50 text-truncate">
                        {{ item.name }}
                      </div>
                      <div class="m-3 w-50 fw-light text-end text-truncate">
                        {{ item.type }}
                      </div>
                    </div>
                  </div>
                </van-cell>
              </van-list>
            </van-config-provider>
          </van-pull-refresh>
          <!-- NFT专题 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { apis, postRequest } from '@/common/ts/request'
export default {
  setup() {
    const state = reactive({
      ntype: 1,
      loading: false,
      finished: false,
      refreshing: false,
      listItems: [],
    })

    const themeVars = {
      cellBackgroundColor: 'transparent',
      cellHorizontalPadding: 0,
      listTextColor: '#f2f3f5',
    }

    const router = useRouter()

    const loadData = async () => {
      const data = await postRequest(apis.topicCard, {
        type: state.ntype,
      })

      state.listItems = state.listItems.concat(data.data)
      state.loading = false
      state.finished = true
    }

    const onLoad = () => {
      if (state.refreshing) {
        state.listItems = []
        state.refreshing = false
      }
      loadData()
    }
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      onLoad()
    }

    const onClickLeft = () => history.back()

    const nftType = (t: number) => {
      state.ntype = t
      onRefresh()
    }

    const toDetail = (id: number) => {
      if (state.ntype == 2) {
        router.push({
          path: '/nft-box-detail',
          query: { id: id, type: state.ntype },
        })
      } else {
        router.push({
          path: '/nft-detail',
          query: { id: id },
        })
      }
    }

    return {
      ...toRefs(state),
      themeVars,
      onClickLeft,
      nftType,
      toDetail,
      onLoad,
      onRefresh,
    }
  },
}
</script>

<style lang="scss" scoped>
.topic-nav {
  padding: 0.3em 0;
  margin: 0.5em 1em;
}

.topic-active {
  color: #164ed2;
  border-bottom: 4px solid #164ed2;
}
.topic-item {
  border-radius: 0.5em;
  &__img {
    position: relative;
    img {
      display: block;
      height: 12.5em;
    }
    &__status {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      padding: 0.4em 1em;
      border-top-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      color: #fff;
      background-color: #99bfe9;
    }
  }
}
</style>
